<template>
  <div class="serve-total">
    <div class="container">
      <h1>为什么要选择亿拓私有化定制服务</h1>

      <ul>
        <li v-for="item in list" :key="item.id">
          <h1>{{ item.title }}</h1>
          <p>{{ item.cnt }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Serve",

  data() {
    return {
      list: [
        {
          id: 1,
          title: "深度的业务流程整合",
          cnt: "打通各业务线壁垒，企业内部业务设计流程，形成全方位、可视化的营销体验",
        },
        {
          id: 2,
          title: "企业原有系统互通",
          cnt: "具备各种数据API和SDK接口，满足数据互通需求，快速对接企业原有系统",
        },
        {
          id: 3,
          title: "本地化部署确保数据安全",
          cnt: "系统及数据在企业自有服务器中，可实现内外网隔离，保障系统数据安全",
        },
        {
          id: 4,
          title: "一次部署 永久授权",
          cnt: "私有化定制产品一次授权，终身使用，为企业提供包括但不限于现场培训、系统运维等服务",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.serve-total {
  width: 100%;
  li {
    list-style-type: none;
  }
  .container {
    width: 1250px;
    margin: 0 auto;
    h1 {
      text-align: center;
      margin: 79px 0 56px 0;
    }
    ul {
      display: flex;
      justify-content: space-between;
      margin-bottom: 120px;
      li:hover {
        box-shadow: 1px 1px 10px #888888;
        position: relative;
        top: -8px;
      }
      li {
        width: 264px;
        height: 360px;
        border-radius: 10px;

        h1 {
          font-size: 20px;
          font-family: PingFang SC;
          margin: 201px 0 0 0;
          color: #333;
        }
        p {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 24px;
          padding: 0 21px;
          margin-top: 21px;
        }
      }
      li:nth-child(1) {
        background: url("../assets/img/img_2-2.1.jpg");
      }
      li:nth-child(2) {
        background: url("../assets/img/img_2-2.2.jpg");
      }
      li:nth-child(3) {
        background: url("../assets/img/img_2-2.3.jpg");
      }
      li:nth-child(4) {
        background: url("../assets/img/img_2-2.4.jpg");
      }
    }
  }
}
</style>